<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <!-- {{ dataType }} -->
    <labelArea label="定点运算函数">
        <el-form size="small" label-width="auto" label-suffix=" :">
            <el-form-item label="整数舍入模式">
                <el-select v-model="data.type">
                    <el-option label="矩形" value="rect"></el-option>
                    <el-option label="圆形" value="circle"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <ctcheckbox v-model="data.ZeroCross">对整数溢出进行饱和处理</ctcheckbox>
            </el-form-item>
            <el-form-item inline>
                <ctcheckbox v-model="data.ZeroCross">锁定数据类型设置以防止被定点工具更改</ctcheckbox>
                <el-button style="width: 100%;">打开定点工具...</el-button>
            </el-form-item>
        </el-form>
    </labelArea>
    <el-form size="small" label-width="auto" label-suffix=" :">
        <el-descriptions size="small" direction="vertical" class="gapDescriptions">
            <template v-for="im, ix in dataType" :key="ix">
                <el-descriptions-item width="50%">
                    <template #label v-if="ix === 0">
                        数据类型
                    </template>
                    <el-form-item :label="im.label" inline>
                        <el-select v-model="data[im.vm]" filterable :filter-method="filterMethod">
                            <el-option label="矩形" value="rect"></el-option>
                            <el-option label="圆形" value="circle"></el-option>
                        </el-select>
                        <el-button @click="im.show = !im.show" style="padding: 0 30px;">
                            <el-icon>
                                <DArrowRight v-show="!im.show" />
                                <DArrowLeft v-show="im.show" />
                            </el-icon>
                        </el-button>
                    </el-form-item>
                    <labelArea v-if="im.show" label="数据类型助手" class="zhushou">
                        <div>
                            <el-form size="small" inline label-width="auto" label-suffix=" :" style="width: 120px;">
                                <el-form-item label="模式">
                                    <el-select v-model="im.mode">
                                        <el-option value="继承" />
                                        <el-option value="内置" />
                                        <el-option value="定点" />
                                        <el-option value="表达式" />
                                    </el-select>
                                </el-form-item>
                            </el-form>


                            <el-form size="small" inline label-width="auto" label-suffix=" :" class="zhushou1">
                                <el-form-item v-if="im.mode == '继承'">
                                    <el-select v-model="data[im.vm]">
                                        <el-option label="矩形" value="rect"></el-option>
                                        <el-option label="圆形" value="circle"></el-option>
                                    </el-select>
                                </el-form-item>
                                <template v-if="im.mode == '内置'">
                                    <el-form-item style="width: 100px;">
                                        <el-select v-model="data[im.vm]">
                                            <el-option label="矩形" value="rect"></el-option>
                                            <el-option label="圆形" value="circle"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="数据类型覆盖">
                                        <el-select v-model="im.mode">
                                            <el-option label="矩形" value="rect"></el-option>
                                            <el-option label="圆形" value="circle"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <template v-if="im.mode == '定点'">
                                    <el-form-item style="">
                                        <el-form size="small" label-width="auto" label-suffix=" :">
                                            <el-form-item label="符号性">
                                                <el-select v-model="im.mode">
                                                    <el-option label="矩形" value="rect"></el-option>
                                                    <el-option label="圆形" value="circle"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="调整尺度">
                                                <el-select v-model="im.mode">
                                                    <el-option label="矩形" value="rect"></el-option>
                                                    <el-option label="圆形" value="circle"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="数据类型覆盖">
                                                <el-select v-model="im.mode">
                                                    <el-option label="矩形" value="rect"></el-option>
                                                    <el-option label="圆形" value="circle"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-form>
                                    </el-form-item>
                                    <el-form-item label="字长"
                                        style="width: 150px;display: flex;align-items: start;padding-top: 2px">
                                        <el-input v-model="data.time" placeholder=""></el-input>
                                    </el-form-item>
                                </template>
                                <template v-if="im.mode == '表达式'">
                                    <el-form-item>
                                        <el-input v-model="data[im.vm]" placeholder=""></el-input>
                                    </el-form-item>
                                </template>
                            </el-form>
                        </div>
                        <div v-if="im.mode == '定点'" style="width:100%;">
                            <FoldBox title="定点详细信息">
                                <el-form size="small" label-width="auto" label-suffix=" :">
                                    <el-form-item label="可表示的最大值">
                                        {{ '未知' }}
                                    </el-form-item>
                                    <el-form-item label="可表示的最小值">
                                        {{ '未知' }}
                                    </el-form-item>
                                    <el-form-item label="精度" inline>
                                        {{ '未知' }}
                                        <el-button style="margin-left: auto;">刷新详细信息</el-button>
                                    </el-form-item>
                                </el-form>
                            </FoldBox>
                        </div>
                    </labelArea>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label v-if="ix === 0">
                        最小值
                    </template>
                    <el-form-item>
                        <el-input v-model="data.time" placeholder=""></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label v-if="ix === 0">
                        最大值
                    </template>
                    <el-form-item>
                        <el-input v-model="data.time" placeholder=""></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </template>
        </el-descriptions>
    </el-form>
    <FoldBox title="其他数据类型">
        <el-form size="small" label-suffix=" :">
            <el-descriptions size="small" direction="vertical" class="gapDescriptions">
                <template v-for="im, ix in otherDataType" :key="ix">
                    <el-descriptions-item width="70%">
                        <template #label v-if="ix === 0">
                            数据类型
                        </template>
                        <el-form-item :label="im.label" inline>
                            <el-select v-model="data[im.vm]">
                                <el-option label="矩形" value="rect"></el-option>
                                <el-option label="圆形" value="circle"></el-option>
                            </el-select>
                            <el-button @click="im.show = !im.show" style="padding: 0 30px;">
                                <el-icon>
                                    <DArrowRight v-show="!im.show" />
                                    <DArrowLeft v-show="im.show" />
                                </el-icon>
                            </el-button>
                        </el-form-item>
                        <labelArea v-if="im.show" label="数据类型助手" class="zhushou">
                            <div>
                                <el-form size="small" inline label-width="auto" label-suffix=" :" style="width: 120px;">
                                    <el-form-item label="模式">
                                        <el-select v-model="im.mode">
                                            <el-option value="继承" />
                                            <el-option value="内置" />
                                            <el-option value="定点" />
                                            <el-option value="枚举" v-if="im.label == 'N Parameter constant output'" />
                                            <el-option value="总线对象" v-if="im.label == 'N Parameter constant output'" />
                                            <el-option value="值类型" v-if="im.label == 'N Parameter constant output'" />
                                            <el-option value="表达式" />
                                        </el-select>
                                    </el-form-item>
                                </el-form>


                                <el-form size="small" inline label-width="auto" label-suffix=" :" class="zhushou1">
                                    <el-form-item v-if="im.mode == '继承'">
                                        <el-select v-model="im.mode">
                                            <el-option label="矩形" value="rect"></el-option>
                                            <el-option label="圆形" value="circle"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <template v-if="im.mode == '内置'">
                                        <el-form-item style="width: 100px;">
                                            <el-select v-model="im.mode">
                                                <el-option label="矩形" value="rect"></el-option>
                                                <el-option label="圆形" value="circle"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="数据类型覆盖">
                                            <el-select v-model="im.mode">
                                                <el-option label="矩形" value="rect"></el-option>
                                                <el-option label="圆形" value="circle"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '定点'">
                                        <el-form-item style="">
                                            <el-form size="small" label-width="auto" label-suffix=" :">
                                                <el-form-item label="符号性">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="调整尺度">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="数据类型覆盖">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-form>
                                        </el-form-item>
                                        <el-form-item label="字长"
                                            style="width: 150px;display: flex;align-items: start;padding-top: 2px">
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '枚举'">
                                        <el-form-item>
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '总线对象'">
                                        <el-form-item>
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '值类型'">
                                        <el-form-item>
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '表达式'">
                                        <el-form-item>
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                </el-form>
                            </div>
                            <div v-if="im.mode == '定点'" style="width:100%;">
                                <FoldBox title="定点详细信息">
                                    <el-form size="small" label-width="auto" label-suffix=" :">
                                        <el-form-item label="可表示的最大值">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item label="可表示的最小值">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item label="精度" inline>
                                            {{ '未知' }}
                                            <el-button style="margin-left: auto;">刷新详细信息</el-button>
                                        </el-form-item>
                                    </el-form>
                                </FoldBox>
                            </div>
                        </labelArea>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label v-if="ix === 0">
                            最小值
                        </template>
                        <el-form-item>
                            <el-input v-model="data.time" placeholder=""></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label v-if="ix === 0">
                            最大值
                        </template>
                        <el-form-item>
                            <el-input v-model="data.time" placeholder=""></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                </template>
            </el-descriptions>
        </el-form>
    </FoldBox>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

const { data } = defineProps(['data'])


const dataType = reactive([
    {
        label: 'P 乘积输出',
        vm: 'pOut',
        mode: '继承'
    },
    {
        label: 'I 乘积输出',
        vm: 'iOut',
        mode: '继承'
    },
    {
        label: 'D 乘积输出',
        vm: 'dOut',
        mode: '继承'
    },
    {
        label: 'N 乘积输出',
        vm: 'nOut',
        mode: '继承'
    },
    {
        label: '总和输出',
        vm: 'sumOut',
        mode: '继承'
    },
])
const otherDataType = reactive([
    {
        label: 'P 参数',
        vm: 'pPar',
        mode: '继承'
    },
    {
        label: 'I 参数',
        vm: 'iPar',
        mode: '继承'
    },
    {
        label: 'D 参数',
        vm: 'dPar',
        mode: '继承'
    },
    {
        label: 'N 参数',
        vm: 'nPar',
        mode: '继承'
    },
    {
        label: 'SumD 输出',
        vm: 'sumOut',
        mode: '继承'
    },
    {
        label: '总和累加器',
        vm: 'sumAcc',
        mode: '继承'
    },
    {
        label: 'SumD 累加器',
        vm: 'sumDAcc',
        mode: '继承'
    },
    {
        label: 'N Parameter constant output',
        vm: 'NPCOut',
        mode: '继承'
    },
])


function filterMethod(e) {
    console.log(e);
    return e
}


watch(() => dataType, e => {
    console.log(e);
}, { deep: true })
</script>


<style scoped>
.zhushou {
    &>div {
        display: flex;

        &>.el-form {
            &.zhushou1 {
                width: calc(100% - 120px);
                margin-left: 8px;
                display: flex;
            }

            & .el-form-item {
                width: 100%;
                margin: 0;
            }

            &>.el-form-item+.el-form-item {
                margin-left: 8px;
            }
        }
    }

}
</style>